import facImg from '@/img/factory.png'
import serImg from '@/img/server.png'
import sysImg from '@/img/system.png'
import oilImg from '@/img/oil.png'
import serDangerImg from '@/img/server-danger.png'
import serErrorImg from '@/img/server-error.png'
const lineNormal = {
  type: 'solid',
  color: '#8bc5fb'
}
const lineError = {
  type: 'deshed',
  color: '#fb8b8b'
}
const lineDanger = {
  type: 'deshed',
  color: '#f8ac58'
}
var rich = {
  a: {
    backgroundColor: {
      image: facImg
    },
    width: 30,
    height: 25
  },
  b: {
    color: '#333',
    align: 'center',
    backgroundColor: '#fff',
    height: 20,
    width: 30,
    lineHeight: 20
  },
  c: {
    color: '#009ce3',
    align: 'center',
    width: 10,
    height: 10,
    borderColor: '#009ce3',
    borderWidth: 1,
    top: 100,
    backgroundColor: '#fff',
    fontSize: 12,
    borderRadius: 5
  }
}

var data = [{
  name: '董事会',
  value: 6,
  children: [{
    name: '总经理',
    value: 6,
    children: [
      {
        name: '营销中心',
        value: 4,
        children: [
          {
            name: '市场部',
            value: 4
          },
          {
            name: '销售部',
            value: 4
          },
          {
            name: '客服部',
            value: 4
          }
        ]
      },
      {
        name: '项目中心',
        value: 4,
        children: [
          {
            name: '售前支持部',
            value: 4
          },
          {
            name: '项目一部',
            value: 4
          },
          {
            name: '项目二部',
            value: 4
          },
          {
            name: '项目三部',
            value: 4
          }
        ]
      },
      {
        name: '技术中心',
        value: 4,
        children: [
          {
            name: '开发部',
            value: 4
          },
          {
            name: '设计部',
            state: 1,
            value: 4
          },
          {
            name: '系统部',
            state: 2,
            value: 4
          }
        ]
      },
      {
        name: '行政部',
        value: 4
      },
      {
        name: '财务部',
        value: 4
      },
      {
        name: '其他分支',
        value: 4,
        children: [{
          name: '汕头分公司',
          value: 4
        }]
      }
    ]
  }]
}]

function todolist(data, n) {
  for (var key in data) {
    const itemStyle = {
      borderWidth: 0,
      borderColor: 'none',
      color: '#fff'
    }
    const label = {
      show: true,
      position: 'inside',
      formatter: [
        '{a|}',
        '{b|' + data[key]['name'] + '}',
        '{c|-}'
      ].join('\n'),
      rich: rich
    }
    if (data[key].children) {
      todolist(data[key].children, n + 1)
      data[key]['action'] = '-'
    } else {
      data[key]['action'] = ''
      label.formatter = [
        '{a|}',
        '{b|' + data[key]['name'] + '}',
        ''
      ].join('\n')
    }
    data[key]['symbolSize'] = [70, 70]
    data[key]['symbol'] = 'circle'
    data[key]['itemStyle'] = itemStyle
    data[key]['label'] = JSON.parse(JSON.stringify(label))
    if (n === 0) {
      data[key]['label'].rich.a.backgroundColor.image = facImg
    } else if (n === 1) {
      data[key]['label'].rich.a.backgroundColor.image = oilImg
    } else if (n === 2) {
      data[key]['label'].rich.a.backgroundColor.image = sysImg
    } else {
      if (data[key].state === 1) {
        data[key]['lineStyle'] = lineError
        data[key]['label'].rich.a.backgroundColor.image = serErrorImg
        data[key]['label'].rich.b.color = '#fb8b8b'
      } else if (data[key].state === 2) {
        data[key]['lineStyle'] = lineDanger
        data[key]['label'].rich.a.backgroundColor.image = serDangerImg
        data[key]['label'].rich.b.color = '#f8ac58'
      } else {
        data[key]['label'].rich.a.backgroundColor.image = serImg
      }
    }
  }
  return data
}
export default {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  textStyle: {
    fontSize: 14
  },
  series: [{
    type: 'tree',
    data: todolist(data, 0),
    left: '2%',
    right: '2%',
    layerPadding: 300,
    nodePadding: 200,
    top: '70',
    bottom: '10%',
    symbol: 'emptyCircle',
    orient: 'vertical',
    lineStyle: lineNormal,
    initialTreeDepth: 3,
    animationDurationUpdate: 750
  }]
}
